<template>
    <div class="box">
        <div class="box1-2" v-if="searchtwo == 1">
            <img class="logo" src="https://imagev2.xmcdn.com/storages/770d-audiofreehighqps/04/BC/GKwRIW4GO9CUAAAkqAFDcwBL.png">
            <div class="inputbox">
                <input  placeholder="请输入内容" @input="changeNation" v-model="inputsj" ref="input" />
                <div class="rightbox" >
                    <van-icon name="search" size="20"/>
                </div>
            </div>
        </div> 

        <div class="box1" v-else>
            <div class="box2">
                <van-icon name="search" />
                <input placeholder="请输入内容" @input="changeNation" v-model="inputsj" ref="input" />
            </div>
            <div class="delete" @click="delete1">取消</div>

        </div>

        <div class="box3" v-if="isShow">
            

            <div class="history">
                <div class="title">
                    <text>搜索历史</text>
                    <van-icon color="#aaa" name="delete" />
                </div>

                <div class="tableList">
                    <div class="table">百家讲坛</div>
                    <div class="table">百家讲坛</div>
                    <div class="table">百家讲坛</div>
                </div>
            </div>

            <div class="tagList">
                <van-tabs v-model="active" @click-tab="getCategoryId">
                    <van-tab v-for="(item, index) in category" :title="item.categoryName" :key="index"
                        :name="item.categoryId" />
                </van-tabs>
            </div>

            <div class="phList">
                <div class="ph" v-for="(item, index) in hotWordResultList" :key="index">
                    <div
                        :class="index == 0 ? 'shuzi first' : index == 1 ? 'shuzi two' : index == 2 ? 'shuzi three' : 'shuzi'">
                        {{
                            index + 1 }}
                    </div>
                    <div class="right" @click="getData(item.word)">
                        <div>{{ item.word }}</div>
                        <div class="logo2">
                            <el-icon v-if="item.shift === 1" color="red">
                                <Top />
                            </el-icon>
                            <el-icon v-show="item.shift === 0">
                                <SemiSelect />
                            </el-icon>
                            <el-icon v-if="item.shift === -1" color="green">
                                <Bottom />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="box4" v-else>
            <div class="box5" v-for="(item, index) in c" :key="index" @click="getData(item.keyword)">
                {{ item.keyword }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import reqApi from '@/api/search/index'
import type { categoryModl, hotWordResult } from '@/api/search/index'
import { Top, SemiSelect, Bottom } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()

const searchtwo = ref()
searchtwo.value = route.query.search

const isShow = ref<boolean>(true)

//获取热门等标签
const aa = async () => {
    let result = await reqApi.reqTagList()
    console.log(result);

    category.value = result.category
}

//获取点击对应标签后的列表
const hotWordResultList = ref<hotWordResult[]>([])
const bb = async (categoryId: number, size: number = 20) => {
    let result = await reqApi.reqTagList2(categoryId, size)
    console.log('bb', result)
    console.log('bb2', result.hotWordResultList[0].shift)
    hotWordResultList.value = result.hotWordResultList
}

//获取输入的筛选数据
const c = ref<any[]>([])
const cc = async (kw: string | undefined, paidFilter: boolean) => {
    let result = await reqApi.reqTagList3(kw, paidFilter)
    console.log(result.data.result.queryResultList);

    c.value = result.data.result.queryResultList


    // category.value = result.category
}

const active = ref();
const getCategoryId = (e: any) => {
    console.log('name', e.name);
    bb(e.name, 20)
}

const category = ref<categoryModl[]>([])
const inputsj = ref<string>()

//搜索
const changeNation = () => {
    console.log('input', inputsj.value)
    isShow.value = false
    cc(inputsj.value, false)
    if (!inputsj.value) {
        isShow.value = true
    }
}


const delete1 = () => {
    isShow.value = true;
    inputsj.value = ''
}

//点击跳转
const getData = (name: string) => {
    router.push({
        path:"/two",
        query: {
            name,
        }
    })
}

onMounted(() => {
    console.log('diao')
    aa()
    bb(-1, 20)
})
</script>

<style scoped>
/* 父组件的样式，穿透子组件样式 */
:deep(.van-tab--active) {
    color: #555;
    font-size: 18px;
    font-weight: normal;
}
</style>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.box {
    padding: 10px 15px 0 15px;

    .box1 {
        display: flex;
        justify-content: space-between;

        font-size: 15px;

        .box2 {
            background-color: #eee;
            border-radius: 40px;
            padding-left: 5px;
            width: 85%;

            input {
                height: 25px;
                margin-left: 5px;
                border-radius: 40px;
                background-color: #eee;
                border: 0;
                width: 70%;
            }
        }

        .delete {
            line-height: 25px;
        }

    }

    .box1-2 {
        margin-bottom: 30px;
        .logo {
            width: 150px;
            margin: 30px 90px 30px 90px;
        }
        .inputbox {
            border: 1px solid  rgb(236, 87, 50);
            border-radius: 50px;
            background-color: rgb(243, 102, 67);
            display: flex;
            width: 235px;
            margin-left: 50px;
            input {
                border-radius: 50px 0  0 50px;
                border: 0;
                font-size: 15px;
                width: 180px;
                padding-left: 10px;
                height: 35px
            }
            .rightbox {
                color: #fff;
                margin: 5px 0 0 10px;
            }
        }
    }

    .history {
        font-size: 13px;
        padding: 20px 0;

        .title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .tableList {
            display: flex;

            .table {
                margin-right: 10px;
                padding: 10px 8px;
                border-radius: 5px;
                background-color: #eee;
            }
        }
    }

    .tagList {
        margin-left: -15px;
    }
}

.phList {
    border-top: 1px solid #eee;
    padding-right: 15px;

    .ph {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin: 10px 0;
        height: 40px;


        .shuzi {
            padding: 3px 20px 0px 15px;
            line-height: 35px;
            color: #fa9d12fd;
        }

        .shuzi.first {
            color: red;
            font-size: 30px;
        }

        .shuzi.two {
            color: rgb(248, 95, 7);
            font-size: 25px;
        }

        .shuzi.three {
            color: rgba(255, 136, 0, 0.904);
            font-size: 23px;
        }

        .right {
            display: flex;
            border-bottom: 1px solid #eee;
            justify-content: space-between;
            height: 40px;
            width: 90%;
            line-height: 40px;
        }


    }
}

.box4 {
    padding: 10px 0;

    .box5 {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        font-size: 15px;
    }
}
</style>